<template>
  <div class="home">
    <HomeTop></HomeTop>
    <div class="">
      <div class="ok-page-width">
        <div class="line-20"></div>
        <div class="wrap1 ok-page-width" style="">
          <p style="font-size: 35px;margin-bottom: 5px;padding-top: 120px;font-weight: bold;">特色乡村双塔镇，欢迎你</p>
          <p style="font-size: 35px;margin-bottom: 5px;font-weight: bold;margin-left: 70px">相应党的号召建设美丽乡村</p>
        </div>
<!--        <div>-->
<!--          <el-image style="width: 100%;height: 460px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image02.jpg')"></el-image>-->
<!--        </div>-->
        <div class="line-20"></div>
        <div class="ok-page-width">
          <div class="ok-box-flex" style="height: 340px; overflow: hidden">
            <div class="ok-page-main" style="flex: 1;background-color: #FFFFFF;margin-right: 15px;">
              <div class="ok-width-max">
                <el-carousel height="340px" style="overflow: hidden">
                  <el-carousel-item v-for="item in zxdtList" :key="item.id">
                    <div style="color: #FFFFFF;" @click="goNews(item)">
                      <el-image style="width: 100%; height: 340px;border-radius: 5px"
                                :src="ok.tool.getImg(item.thumbnail)"
                                fit="cover"></el-image>
                      <div style="text-align: center;position: relative; bottom:60px;z-index: 1;color: #FFFFFF;height: 55px;line-height: 45px; padding-bottom: 10px; overflow: hidden;background-color: rgba(0,0,0,0.5)">
                        {{item.title}}
                      </div>
                    </div >
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>

            <div class="ok-page-right"  style="width: 680px;flex: 1;">
              <div class="ok-width-max">

                <div class="ok-list">
                  <div class="title" style="margin-bottom:18px;">
                    优秀商户
                  </div>
                  <div>
                    <div style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 15px;margin-bottom: 20px;">
                      <div v-for="item in userList" :key="item.id">
                        <div style="text-align: center;width: 140px;margin-top: 30px" @click="goUserProduct(item)">
                          <el-image style="width: 120px; height:120px;margin-bottom: 10px;margin-top: 10px;" :src="ok.tool.getImg(item.image)"
                                    fit="fill"></el-image>
                          <div>
                            <span style="font-size: 20px;font-weight: bold">{{item.nickName}}</span>
                          </div>
<!--                          <div>-->
<!--                            <span>{{textCut(item.intro,15)}}</span>-->
<!--                          </div>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="line-20"></div>
        <div class="ok-page-width">
          <div class="ok-box-flex" style="height: 340px; overflow: hidden">
            <div class="ok-page-main" style="flex: 1;background-color: #FFFFFF;margin-right: 15px;">
              <div class="ok-width-max">
                <div class="ok-list">
                  <div class="title" style="margin-bottom:18px;">
                    通知公告 <span style="cursor: pointer" @click="$router.push({path:'/views/news/index',query:{type:'tzgg'}})">更多>></span>
                  </div>
                  <div v-for="item in tzggList" :key="item.id">
                    <div class="item" style="position: relative">
                      <span style="color: #000000;font-size: 18px">
                        <span style="cursor: pointer" @click="goNews(item)">{{textCut(item.title,20)}} </span><span style="float: right;">{{ok.date.formatDate(item.onlineTime)}}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>


            <div class="ok-page-right"  style="width: 680px;flex: 1;">
              <div class="ok-width-max">
                <div class="ok-list">
                  <div class="title" style="margin-bottom:18px;">
                     新闻资讯 <span style="cursor: pointer" @click="$router.push({path:'/views/news/index',query:{type:'xwzx'}})">更多>></span>
                  </div>
                  <div v-for="item in xwzxList" :key="item.id">
                    <div class="item" style="position: relative">
                      <span style="color: #000000;font-size: 18px">
                        <span style="cursor: pointer" @click="goNews(item)">{{textCut(item.title,20)}} </span><span style="float: right;">{{ok.date.formatDate(item.onlineTime)}}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="ok-page-width">
          <el-carousel height="450px" direction="vertical" :autoplay="true" style="overflow: hidden">
            <el-carousel-item key="item1" class="im" >
              <div @click="$router.push({path:'/views/introduce/index',query:{type:'background'}})" style="cursor: pointer">
                <el-image style="width: 100%;height: 460px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image01.jpg')"></el-image>
                <div style="text-align: center;position: relative; bottom:100px;z-index: 1;color: #FFFFFF;height: 100px;line-height: 45px; padding-bottom: 10px; overflow: hidden;background-color: rgba(0,0,0,0.5)">
                  <h2>乡村背景</h2>
                </div>
              </div>

            </el-carousel-item>
            <el-carousel-item key="item2" class="im" >
              <div style="cursor: pointer" @click="$router.push({path:'/views/introduce/index',query:{type:'history'}})">
                <el-image style="width: 100%;height: 460px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image01.jpeg')"></el-image>
                <div style="text-align: center;position: relative; bottom:100px;z-index: 1;color: #FFFFFF;height: 100px;line-height: 45px; padding-bottom: 10px; overflow: hidden;background-color: rgba(0,0,0,0.5)">
                  <h2>乡村历史</h2>
                </div>
              </div>

            </el-carousel-item>
            <el-carousel-item key="item3" class="im" >
              <div style="cursor: pointer" @click="$router.push({path:'/views/introduce/index',query:{type:'culture'}})">
                <el-image style="width: 100%;height: 460px;margin-top: 20px;border-radius: 5px" :src="require('@/static/images/image06.png')"></el-image>
                <div style="text-align: center;position: relative; bottom:100px;z-index: 1;color: #FFFFFF;height: 100px;line-height: 45px; padding-bottom: 10px; overflow: hidden;background-color: rgba(0,0,0,0.5)">
                  <h2>乡村文化</h2>
                </div>
              </div>

            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="line-20"></div>
    </div>
    <div class="line-20"></div>
    <HomeFoot></HomeFoot>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeTop from "@/components/HomeTop.vue";
import HomeFoot from "@/components/HomeFoot.vue";
import api from "@/api/publicApi"
import ok from "@/assets/ok";

export default {
  name: 'HomeView',
  computed: {
    ok() {
      return ok
    }
  },
  components: {
    HomeFoot,
    HomeTop,
  },
  data(){
    return{
      active:0,
      url:"@/static/images/image01.jpg",
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      ok_page:{
        type:"",
        key:"",
        pageSize:6,
        current:0
      },
      zxdtList:[],
      tzggList:[],
      xwzxList:[],
      backgroundInfo:{},
      cultureInfo:{},
      historyInfo:{},
      productList:[],
      userList:[]
    }
  },
  mounted() {
    this.init();
  },
  methods:{
    init(){
      this.getzxdt();
      this.gettzgg();
      this.getxwzx();
      this.getInfo();
      this.getProduct();
      this.getUserList();
    },
    getUserList(){
      let _data = {
        key:"",
        pageSize:4,
        current:0,
      }
      api.getUser(_data).then(res =>{
        this.userList = res.result.list;
      })
    },
    getzxdt(){
      let _data = {...this.ok_page}
      _data.type = "zxdt";
      api.getNewsPage(_data).then(res =>{
        this.zxdtList = res.result.list;
      })
    },
    gettzgg(){
      let _data = {...this.ok_page}
      _data.type = "tzgg";
      api.getNewsPage(_data).then(res =>{
        this.tzggList = res.result.list;
      })
    },
    getxwzx(){
      let _data = {...this.ok_page}
      _data.type = "xwzx";
      api.getNewsPage(_data).then(res =>{
        this.xwzxList = res.result.list;
      })
    },
    getInfo(){
      api.getInfo({type:"background"}).then(res =>{
        this.backgroundInfo = res.result;
      });
      api.getInfo({type:"culture"}).then(res =>{
        this.cultureInfo = res.result;
      })
      api.getInfo({type:"history"}).then(res =>{
        this.historyInfo = res.result;
      })
    },
    getProduct(){
      let _data = {
        key:"",
        pageSize:4,
        current:0,
        status:9
      }
      api.getProductPage(_data).then(res =>{
        this.productList = res.result.list;
      })
    },
    goUserProduct(item){
      this.$router.push({
        path:"/views/product/userProduct",
        query:{
          id:item.id,
          name:item.nickName
        }
      })
    },
    goProduct(item){
      this.$router.push({
        path:"/views/product/productView",
        query:{
          id:item.id
        }
      })
    },
    textCut(item,num){
      if (item.length>num){
        item = item.slice(0,num)+"...";
      }
      return item
    },
    goNews(item){
      this.$router.push({path:'/views/news/newsView',query:{id:item.id}})
    }
  }
}
</script>
<style>
.wrap1{
  background: url('../static/images/image02.jpg');
  height: 460px;
  background-size: cover;
  position: relative;
  color: white;
  line-height: 60px
}
</style>
